<template>
  <view class="page">
    <view class="ff__box">
      <view class="ff__row">
        <view class="ff__label star">姓名</view>
        <input class="ff__input" placeholder="请输入姓名" />
      </view>
      <view class="ff__row">
        <view class="ff__label star">联系手机</view>
        <input class="ff__input" placeholder="请输入联系手机" />
      </view>
      <view class="ff__row">
        <view class="ff__label star">地区</view>
        <view class="ff__value">
          <text class="yd-flex-1 ff__placeholder">请输入地区</text>
          <image class="ff__arrow" src="~@/static/shop/arrow.png" />
        </view>
      </view>
      <view class="ff__row">
        <view class="ff__label star">详细地址</view>
        <input class="ff__input" placeholder="请输入详细地址" />
      </view>
    </view>
    <view class="block">
      <text>设置默认地址</text>
      <switch color="#23e615" style="transform:scale(0.9)"/>
    </view>
    <view class="global-btn">保存</view>
  </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx 24rpx 2rpx 24rpx;
}
.ff__box{
	background-color: #fff;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx 0 24rpx;
}
.ff__row{
	width: 100%;
	min-height: 88rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 2rpx solid #EEEEEE;
	color: #333;
  &:last-child {
    border-bottom: none;
  }
}
.ff__label{
  width: 160rpx;
	font-size: 26rpx;
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-right: 20rpx;
	padding-left: 4rpx;
	white-space: nowrap;
  color: #999;
}
.ff__label.star::before{
	content: '*';
	min-width: 16rpx;
	color: #FF3030;
	font-size: 30rpx;
	text-align: left;
	line-height: 1;
	margin-top: 4rpx;
	margin-right: 8rpx;
}
.ff__value{
	flex: 1;
	box-sizing: border-box;
	padding-right: 16rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	font-size: 26rpx;
  color: #333;
}
.ff__input{
	flex: 1;
	height: 32rpx;
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
	margin-top: 4rpx;
}
.ff__placeholder{
	color: #d1d1d1;
	font-size: 28rpx;
}
.ff__arrow{
  min-width: 44rpx;
	width: 44rpx;
	height: 88rpx;
}
.block {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 14rpx;
  color: #999999;
  box-sizing: border-box;
  padding: 0 24rpx;
  margin-top: 24rpx;
}
</style>
